<template>
	<view class="root safe-area-inset-bottom pt-44 f1 jc-center">
		<view class="ai-center">
			<image
				:style="{ width: `64%`, height: `90rpx` }"
				src="/static/img/pic-hello.png"
				mode="aspectFill"
			/>
			<text class="fs-40 color-333 fw-700 mt-48">欢迎登录运输APP</text>
		</view>

		<view class="mt-100">
			<label
				:style="{
					boxShadow: `0 8rpx 44rpx 0 rgba(207, 207, 207, 0.3)`,
					height: `94rpx`,
					margin: `22rpx 56rpx`,
					padding: `20rpx`,
				}"
				class="br-20"
				v-for="(item, key) in model"
				:key="key"
			>
				<image
					class="width-32 height-38 mr-18"
					:src="`/static/img/icon-${key}.png`"
					mode="aspectFill"
				/>
				<input
					:type="item.type"
					:maxlength="item.maxlength"
					:placeholder="item.placeholder"
					v-model="item.value"
					class="f1 input fs-30"
					placeholder-class="color-ccc fs-28"
				/>
			</label>
		</view>

		<view class="fs-28 fd-row ml-50 mr-50 jc-sb">
			<navigator
				url="/pages/authorization/register"
				class="color-4052e4"
				:style="{ padding: `6rpx` }"
				hover-class="tap-hover"
			>
				去注册
			</navigator>
			<navigator
				url="/pages/authorization/resetPassword"
				class="color-ccc"
				:style="{ padding: `6rpx` }"
				hover-class="tap-hover"
			>
				忘记密码
			</navigator>
		</view>

		<button
			:style="{
				backgroundImage: `linear-gradient(45deg, #4051E3, #4672FF)`,
				margin: `134rpx 55rpx 0`,
			}"
			class="color-fff fs-32 br-20 lh-3 fw-700"
			hover-class="tap-hover"
			@click="submit"
		>
			登录
		</button>

		<view class="ai-center mt-40">
			<view class="mt-30 fd-row jc-center ai-center fs-22">
				<label>
					<switch @change="isChecked" type="checkbox" :checked="isAgree" color="#fff" />
					<text class="color-999">我已阅读并同意</text>
				</label>

				<navigator
					class="color-1b1b1b"
					hover-class="tap-hover"
					hover-start-time="50"
					:url="'privacy' | webviewURL($config)"
				>
					《隐私政策》
				</navigator>
				<text class="color-999">和</text>
				<navigator
					class="color-1b1b1b"
					hover-class="tap-hover"
					:url="'protocol' | webviewURL($config)"
				>
					《用户使用协议》
				</navigator>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { Storage, isPhoneNumber, combineURLs, transformURL } from "@/static/libs/utils";

	@Component({
		filters: {
			webviewURL(type: string, { currentEnv, path }: AnyObject): string {
				/**
				 *  fetch(location.origin + location.hash.slice(1) + location.search)
				 *	  .then(res => res.json())
				 *	  .then(res => document.write(res.data.content));
				 */
				return (
					"/pages/common/webview?url=" +
					transformURL(
						combineURLs(currentEnv.http, path.richText),
						{ token: Storage.get("authorization") },
						path.api + "/" + type
					)
				);
			},
		},
	})
	export default class Login extends Vue {
		// component property
		isAgree: boolean = false;
		baseData: AnyObject = {};
		model: AnyObject = {
			account: {
				type: "number",
				maxlength: 11,
				placeholder: "请输入手机号码",
				value: "",
			},
			password: {
				type: "password",
				maxlength: 16,
				placeholder: "请输入密码",
				value: "",
			},
		};

		onShow() {
			// #ifdef MP-WEIXIN
			uni.hideHomeButton();
			// #endif
		}

		isChecked({ detail }: AnyObject) {
			this.isAgree = detail.value;
		}

		submit() {
			if (!this.isAgree) {
				uni.showToast({
					icon: "none",
					title: "你需要先同意相关协议和政策后才能继续",
				});
				return;
			}

			const { account, password } = this.model;

			if (!isPhoneNumber(account.value) || !password.value) {
				uni.showToast({
					title: "请检查手机号码或密码是否输入正确",
					icon: "none",
				});
				return;
			}

			uni.showLoading({ title: "Logging in..." });

			this.$request
				.post("/login", {
					mobile: account.value,
					password: password.value,
				})
				.then(({ data }) => {
					Storage.set("authorization", data.token);
					uni.reLaunch({ url: "/pages/main/home", complete: uni.hideLoading });
				});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	::v-deep {
		switch {
			transform: scale(0.6);
			.wx-checkbox-input,
			.uni-checkbox-input {
				border-color: #0d81f6;
				background-color: transparent;
			}

			.wx-checkbox-input.wx-checkbox-input-checked,
			.uni-checkbox-input.uni-checkbox-input-checked {
				background-color: #0d81f6;
			}

			&:not([disabled]) {
				.wx-checkbox-input:hover,
				.uni-checkbox-input:hover {
					border-color: #0d81f6;
				}
			}
		}
	}
</style>